<template>
  <div>
    <!-- main start -->
    <div class="navList">
      <div class="w">
        <div class="logo">
        </div>
        <ul>
          <li ><router-link to="/baseServiceOrderSearch">订单查询</router-link></li>
          <li><router-link to="/baseServiceOrderAdd">新增购买记录</router-link></li>
          <li class="active" ><router-link to="/baseServiceOrderStatistics">账户管理</router-link></li>
        </ul>
      </div>
    </div>

    <div class="contianer">
      <div class="orderInquiry">
        <div class="inquiryTerm">
          <div class="w">
            <h1 class="hposition">订单查询 <span></span></h1>
            <div class="inquiryCon">
              <div>
                <span>时间：</span>
                <label class="setTime"><input id="startTime" type="text" class="Wdate startTime" value="" v-model="startTime" onclick="WdatePicker()  "><i>—</i><input type="text" class="" value="" :value="endTime"  onclick="WdatePicker()"  class="Wdate endTime"></label>
                <label><span class="setToday" @click="search($event,'today')">今天 </span>｜最近：<span @click="search($event,'span')">1个月</span><span  @click="search($event,'span')">3个月</span><span  @click="search($event,'span')">1年</span></label>
              </div>
            </div>
            <div class="inquiryList">
              <div>
                <span>分类：</span>
                <ul>
                  <li>全部</li>
                  <li>广电线上支付</li>
                  <li>广电线下支付</li>
                </ul>
              </div>
              <div>
                <span>状态：</span>
                <ul>
                  <li :class="{active:trade_status==-1}" @click="trade_status=-1;search('')" >全部</li>
                  <li :class="{active:trade_status==1}" @click="trade_status=1;search('')" >成功</li>
                  <li :class="{active:trade_status==0}" @click="trade_status=0;search('')"  >未支付</li>
                </ul>
                <p class="pageList"><a href="javaScript:void(0)" @click="search($event,'-')"></a><label><input type="text" v-model="searchPageSN" @keydown="search($event,'p');">/{{baseServiceOrderCount}}页</label><a href="javaScript:void(0)" @click="search($event,'+')"></a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="orderInquiryList">
          <div class="w">
            <table class="listCon">
              <thead>
                <tr>
                  <th>分类</th>
                  <th>手机号</th>
                  <th>姓名</th>
                  <th>创建时间</th>
                  <th>订单号</th>
                  <th>所属学校</th>
                  <th>所属班级</th>
                  <th>购买时长</th>
                  <th>支付状态</th>
                  <th>支付金额(元)</th>
                  <th>服务开始日期</th>
                  <th>服务截止日期</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in baseServiceOrderArray">
                  <td>
                    <img src="/static/img/onlineIcon.png" alt="">
                  </td>
                  <td><p>{{item.cloudUserPhoneNumber}}</p></td>
                  <td><p>{{item.cloudUserName}}</p></td>
                  <td>
                    <p>{{item.updateTime}}</p>
                    <!-- <h1>15:56</h1> -->
                  </td>
                  <td><p>{{item.out_trade_no}}</p></td>
                  <td><p>{{item.schoolName}}</p></td>
                  <td><p>{{item.className}}</p></td>
                  <td><p>{{item.serviceDuration}}</p></td>
                  <td><p>{{item.trade_status}}</p></td>
                  <td><p>{{item.total_fee}}</p></td>
                  <td><p>{{item.serviceStartDay}}</p></td>
                  <td><p>{{item.serviceEndDay}}</p></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->
  </div>
</template>

<script>
import axios from 'axios'
import config from '@/config'

export default {
  name: 'baseServiceOrderSearch',
  data () {
    return {
      // 查询条件
      buyerPhoneNumber: '',
      cloudUserName: '',
      schoolName: '',
      className: '',
      trade_status: -1,
      pageSN: 0,
      pageSize: 10,

      // 
      baseServiceOrderArray:[],
      baseServiceOrderCount: 1,
      searchPageSN:1,
      startTime:'2017-08-09',
      endTime:'2017-08-09',
    }
  },
  methods: {
    search: function (event,str) {
      if(event){
        if(str=="-"){
          if(this.searchPageSN>1){
            this.searchPageSN--;
            this.pageSN=this.searchPageSN;
          }
        }
        if(str=="+"){
          if(this.searchPageSN<this.baseServiceOrderCount){
            this.searchPageSN++;
            this.pageSN=this.searchPageSN;
          }
        }
        if(str=="p"){
          if(event.keyCode==13){
            this.pageSN=this.searchPageSN;
          }else{
            return false;
          }
        }
        if(str=='span'){
          var curTime=new Date();
          this.endTime=this.dataForm(curTime);
          document.querySelector(".endTime").value=this.endTime;
          var that=event.currentTarget;
          var timeStr=that.innerHTML;
          if(timeStr=='1个月'){
            this.startTime=this.getPreMonth(this.endTime,1);
            document.querySelector(".startTime").value=this.startTime;
          }
          if(timeStr=='3个月'){
            this.startTime=this.getPreMonth(this.endTime,3);
            document.querySelector(".startTime").value=this.startTime;
          }
          if(timeStr=='1年'){
            this.startTime=this.getPreMonth(this.endTime,12);
            document.querySelector(".startTime").value=this.startTime;
          }
          this.searchPageSN=1;
          this.pageSN=1;
        }
        if(str=='today'){
          var curTime=new Date();
          this.startTime=this.endTime=this.dataForm(curTime);
          document.querySelector(".endTime").value=this.endTime;
          document.querySelector(".startTime").value=this.startTime;
          this.searchPageSN=1;
          this.pageSN=1;
        }
      }else{
        this.searchPageSN=1;
        this.pageSN=1;
        this.startTime=document.querySelector(".startTime").value;
        this.endTime=document.querySelector(".endTime").value;
      }
      // 参数
      var data = new FormData()
      data.append('request', 'baseServiceOrderStatistics')
      data.append('PHPSESSID', localStorage.PHPSESSID)
      data.append('startTime', this.startTime)
      data.append('endTime', this.endTime)
      data.append('trade_status', this.trade_status)
      data.append('pageSN', this.pageSN)
      data.append('pageSize', this.pageSize)
      // 异步请求 
      let _this = this;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderStatistics',data)
        .then(function (response) {
          // console.log(response);
          let data = response.data
          if (data.result==0) {
            _this.baseServiceOrderArray = data.data.baseServiceOrderArray
            _this.baseServiceOrderCount = Math.ceil(data.data.baseServiceOrderCount/_this.pageSize)
          }
          if (data.result==2) {
            localStorage.clear()
            document.cookie = ''
            _this.$router.push({ path: 'login' })
          }
          // localStorage.username = username
          // localStorage.password = password
        })
        .catch(function (error) {
          console.log(error);
          // _this.$router.push('/login')
        });
    },
    dataForm: function (time) {
      var year,month,day;
      year=new Date(time).getFullYear();
      month=new Date(time).getMonth() + 1;
      day=new Date(time).getDate();
      month=month<10?"0"+month:month;
      day=day<10?"0"+day:day;
      return year+"-"+month+"-"+day;
    },
    getPreMonth:function (date,mm) {
      var arr = date.split('-');
      var year = arr[0];
      var month = arr[1]-1;
      var day = arr[2];
      var days = new Date(year, month, 0);
      days = days.getDate();
      var year2 = year;
      var month2 = parseInt(month) - mm;
      if(mm>=12){
        year2 = parseInt(year2) - 1;
        month2=parseInt(month);
      }else if(mm<6 && month2>month){
        year2 = parseInt(year2) - 1;
        month2=parseInt(month)+12-mm;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
          day2 = days2;
      } 
      month2+=1; 
      if (month2 < 10) {
          month2 = '0' + month2;
      }
      return  year2 + '-' + month2 + '-' + day2;
    },
    timeChange: function(event) {
      WdatePicker()
      this.endTime = event.target.value
      console.log( event )
      console.log(this)
      console.log(this.startTime)
      console.log(this.endTime)
    }
  },
  watch: {
    startTime: function () {
      console.log(this.startTime);
    }
  },
  mounted:function(){
    this.$nextTick(function(){
      // var curTime=new Date();
      // this.endTime=this.dataForm(curTime);
      // document.querySelector(".endTime").value=this.endTime;
      // this.startTime=this.getPreMonth(this.endTime,1);
      // document.querySelector(".startTime").value=this.startTime;
      // this.search("","");
    })
  }
}
// function timeChange() {

//  console.log("55555555");

// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.orderInquiry  h1.hposition span{right:385px;}
</style>
